<script setup>
import MyChart from "@/components/myChart";
import { ref, onMounted, watchEffect } from "vue";
import * as echarts from "echarts";
import { getRandomArrayElements } from "@/utils/tools";

const colorList = [
  [
    {
      offset: 0,
      color: "#fead7a"
    },
    {
      offset: 1,
      color: "#fb605e"
    }
  ],
  [
    {
      offset: 0,
      color: "#f6c86d"
    },
    {
      offset: 1,
      color: "#f38229"
    }
  ],
  [
    {
      offset: 0,
      color: "#58e2a9"
    },
    {
      offset: 1,
      color: "#25ce81"
    }
  ],
  [
    {
      offset: 0,
      color: "#6ccbe7"
    },
    {
      offset: 1,
      color: "#1290d4"
    }
  ],
  [
    {
      offset: 0,
      color: "#69a4f9"
    },
    {
      offset: 1,
      color: "#3d51f7"
    }
  ],
  [
    {
      offset: 0,
      color: "#7472f7"
    },
    {
      offset: 1,
      color: "#663bed"
    }
  ],
  [
    {
      offset: 0,
      color: "#9050fb"
    },
    {
      offset: 1,
      color: "#9723f7"
    }
  ]
];

let angle = 0; //角度，用来做简单的动画效果的
let total = ref(0);
var outerRidus1 = 0.8;
var outerRidus2 = 0.85;
let options = ref({
  grid: {
    top: "-10",
    left: "-20",
    right: 30,
    bottom: 10,
    containLabel: true
  },
  legend: {
    orient: "vertical",
    show: true,
    right: "8%",
    y: "center",
    icon: "pin",
    itemGap: 8,
    textStyle: {
      color: "#FFFFFF",
      fontSize: 12,
      lineHeight: 20
    }
  },
  title: {
    text: 0,
    subtext: `月度故障次数`,
    top: "40%",
    left: "48%",
    itemGap: 15,
    textStyle: {
      color: "#ffffff",
      fontSize: 20,
      fontWeight: 400
    },
    subtextStyle: {
      color: "#fffff",
      fontSize: 16,
      fontWeight: 400
    },
    textAlign: "center"
  },
  tooltip: {
    show: false
  },
  series: [
    // 最外层圆
    {
      type: "pie",
      radius: ["75%", "55%"],
      center: ["50%", "50%"],
      hoverAnimation: false,
      data: [],
      label: {
        show: false,
        position: "outside",
        formatter: "{d}%",
        color: "#FFFFFF"
      },
      labelLine: {
        normal: {
          length: 80,
          lineStyle: {
            width: 1
          }
        }
      },
      itemStyle: {
        normal: {
          color: function(colors) {
            return {
              colorStops: colorList[colors.dataIndex],
              opacity: 0
            };
          }
        }
      }
    },
    // 内圆 + 中间文字
    {
      type: "pie",
      radius: ["60%", "40%"],
      center: ["50%", "50%"],
      hoverAnimation: false,
      z: 100,
      label: {
        show: false,
        position: "center",
        color: "#fff",
        // formatter: params => {
        //   let total = 0;
        //   total += params.data.value;
        //   // console.log();
        //   return `大项修执行情况\r\n${total}`;
        // },
        rich: {
          total: {
            fontSize: 24,
            color: "#fff"
          }
        },
        color: "#FFFFFF",
        fontSize: 16,
        lineHeight: 30
      },
      data: [],
      labelLine: {
        show: false
      },
      itemStyle: {
        normal: {
          color: function(colors) {
            return {
              colorStops: colorList[colors.dataIndex]
            };
          },
          opacity: 0.5
        }
      }
    },

    // 紫色线1 + 点
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function(params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus1, // 180,
            startAngle: ((0 + angle) * Math.PI) / 180,
            endAngle: ((90 + angle) * Math.PI) / 180
          },
          style: {
            stroke: "#8383FA",
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    },
    // 紫色线1点
    {
      name: "", //紫点
      type: "custom",
      coordinateSystem: "none",
      renderItem: function(params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus1;
        let point = getCirlPoint(x0, y0, r, 0 + angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4
          },
          style: {
            stroke: "#8450F9", //绿
            fill: "#8450F9"
          },
          silent: true
        };
      },
      data: [0]
    },
    // 蓝色
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function(params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus1, // 180,
            startAngle: ((180 + angle) * Math.PI) / 180,
            endAngle: ((270 + angle) * Math.PI) / 180
          },
          style: {
            stroke: "#4386FA",
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "", // 蓝色
      type: "custom",
      coordinateSystem: "none",
      renderItem: function(params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus1; // 180
        let point = getCirlPoint(x0, y0, r, 180 + angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4
          },
          style: {
            stroke: "#4386FA", //绿
            fill: "#4386FA"
          },
          silent: true
        };
      },
      data: [0]
    },
    // 橘色
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function(params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus2, // 200,
            startAngle: ((250 + -angle) * Math.PI) / 180,
            endAngle: ((10 + -angle) * Math.PI) / 180
          },
          style: {
            stroke: "#0CD3DB",
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    },
    {
      name: "", //绿点
      type: "custom",
      coordinateSystem: "none",
      renderItem: function(params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus2; // 200;
        let point = getCirlPoint(x0, y0, r, 250 + -angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4
          },
          style: {
            stroke: "#0CD3DB", //绿
            fill: "#0CD3DB"
          },
          silent: true
        };
      },
      data: [0]
    },
    // 粉色
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function(params, api) {
        return {
          type: "arc",
          shape: {
            cx: api.getWidth() / 2,
            cy: api.getHeight() / 2,
            r: (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus2, // 200,,
            startAngle: ((70 + -angle) * Math.PI) / 180,
            endAngle: ((200 + -angle) * Math.PI) / 180
          },
          style: {
            stroke: "#FF8E89",
            fill: "transparent",
            lineWidth: 1.5
          },
          silent: true
        };
      },
      data: [0]
    },
    //粉色点
    {
      name: "",
      type: "custom",
      coordinateSystem: "none",
      renderItem: function(params, api) {
        let x0 = api.getWidth() / 2;
        let y0 = api.getHeight() / 2;
        let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * outerRidus2; // 200,;
        let point = getCirlPoint(x0, y0, r, 70 + -angle);
        return {
          type: "circle",
          shape: {
            cx: point.x,
            cy: point.y,
            r: 4
          },
          style: {
            stroke: "#FF8E89", //粉
            fill: "#FF8E89"
          },
          silent: true
        };
      },
      data: [0]
    }
  ]
});

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
  let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
  let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
  return {
    x: x1,
    y: y1
  };
}

let result = [
  { name: "重型一分厂", value: 20 },
  { name: "叶片分厂", value: 20 },
  { name: "金工分厂", value: 30 },
  { name: "焊接分厂", value: 52 },
  { name: "工业透平", value: 30 },
  { name: "重型二分厂", value: 28 },
  { name: "隔板分厂", value: 24 }
];

const radomData = () => {
  total.value = 0;
  let data = getRandomArrayElements(result, 7).map(item => item);
  options.value.series[0].data = data;
  options.value.series[1].data = data;
  data.forEach(item => {
    total.value += item.value;
  });
  options.value.title.text = total.value;
};

radomData();
setInterval(function() {
  angle = angle + 3;
  radomData();
}, 3000);
</script>
<template>
  <div class="leftBox2 baseBorderBg">
    <div class="baseBoxHeader">月故障次数</div>
    <div class="baseBoxBody">
      <div style="margin-left:-90px;height:100%;">
        <myChart :option="options"></myChart>
      </div>
    </div>
  </div>
</template>